<template lang="html">
    <div class="mall-layout-header">
        <div class="mall-layout-header-container">
            <div class="mall-layout-logo-header">
                <div class="mall-layout-logo-header">
                    <div class="mall-layout-logo-header-left">
                        <div class="img-box" @click="goHome()">
                            <img style="width: 100%;" src="../../assets/img/zpw01.png" alt="">
                        </div>
                    </div>
                    <div class="mall-layout-logo-header-right">
                        <div class="mall-layout-search-btn-right">
                            <div class=" mall-layout-search-home">
                                <div style="display: flex;">
                                    <div class="mall-layout-search mall-layout-search-home ant-input-search">
                                        <img class="mall-layout-search-prefix-icon" src="../../assets/img/index/qiu.gif"></img>
                                        <div class="mall-layout-search-home ant-input-search ant-input">
                                            <el-input placeholder="搜索商品名称/国际条码/SKU编码" v-model="input3"></el-input>
                                        </div>
                                    </div>
                                    
                                    <div class="ant-input-group-addon" @click="btnclick">
                                        <div style="width: 22px;height: 22px;">
                                            <img style="width: 100%;height: 100%;" src="https://static.xyb2b.com/images/ac07a4a0052e137bda23b10c643dec64.png" alt="">
                                        </div>
        
                                    </div>
                                </div>
                            </div>
                            <div class="mall-layout-header-group-btn">
                                <div class="mall-layout-header-group-btn-item" @click="goNext('/index/shop/customerManagement')">
                                    <div class="anticon icon">
                                        <i class="el-icon-document" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">管理</div>
                                </div>
                                <div class="mall-layout-header-group-btn-item" @click="goNext('/index/shoppingTrolley')">
                                    <div class="anticon icon actcolor">
                                        <i class="el-icon-shopping-cart-2" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">购物车</div>
                                </div>
                                <div class="mall-layout-header-group-btn-item" @click="goNext('/index/order/allOrder')">
                                    <div class="anticon icon">
                                        <i class="el-icon-s-custom" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">订单</div>
                                </div>
                                <!-- <div class="mall-layout-header-group-btn-item">
                                    <div class="anticon icon">
                                        <i class="el-icon-s-shop" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">卖家中心</div>
                                </div> -->
                                <div class="mall-layout-header-group-btn-item">
                                    <div class="anticon icon">
                                        <img src="../../assets/img/index/people.png" alt="" style="width: 24px;height: 24px;border-radius: 50%;">
                                    </div>
                                    <div class="name">
                                        <el-dropdown @command="handleCommand">
                                            <span class="name">
                                              个人中心
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                              <el-dropdown-item command="a">账户中心</el-dropdown-item>
                                              <el-dropdown-item command="b">退出登录</el-dropdown-item>
                                            </el-dropdown-menu>
                                          </el-dropdown>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="mall-layout-header-classify-nav">
            <div class="Assort_assort-container__tVW7Z">
                <div class="Assort_assort-head__Qc5zA">
                    <span role="img" class="anticon Assort_left-icon__t4Y2Y"></span>
                    <span class="Assort_name__FVlfo">分类</span>
                    <img class="Assort_right-icon__k6HOw" src="" alt="">
                </div>
                <div class="Assort_assort-box__gNy26">
                    <div class="Assort_assort-center__703JL">
                        <div class="Assort_category-list__3c7Q">
                            <div class="Assort_category-item__y6uxE" v-for="item in classIfyList" @mouseenter="mouseover(item)" @mouseleave="mouseLeave(item)">
                                <div class="Assort_category-title__Hp7N">{{item.name}}</div>
                                <img src="" alt="">
                            </div>
                        </div>
                        <div class="Assort_category-body__vulOh">
                            <div class="Assort_subcategory-list__x6HoB">
                               <div style="display: flex;flex-wrap: wrap;flex: 1;">
                                    <div class="Assort-right" v-for="item in childList">
                                        <div class="Assort-right-item" @click="gosearchResult(item)">{{item.name}}</div>
                                    </div>
                               </div>
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mall-layout-header-nav">
                <div class="nav-item track-nav-0" @click="gotopic">每周热推</div>
                <div class="nav-item track-nav-0">行云精选</div>
                <div class="nav-item track-nav-0">高毛利尖货</div>
                <div class="nav-item track-nav-0">品牌直供</div>
                <div class="nav-item track-nav-0">临期清仓</div>
                <div class="nav-item track-nav-0">限时特惠</div>
                <div class="nav-item track-nav-0">新品首发</div>
                <div class="nav-item track-nav-0">小样专区</div>
                <div class="nav-item track-nav-0">榜单热卖</div>
            </div>
        </div>
        <keep-alive>
            <router-view>
            </router-view>
        </keep-alive>
        <!-- <router-view :classIfy="classIfyList" v-on:chang="chang">
        </router-view> -->
    </div>
  <!-- <div class="commodity">
    <div :class="[nav == 'nav' ? 'nav' : 'navList']">
      <div class="shoppingTrolleySearch">
        <div class="searchBox">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search"  clearable>
            <el-button class="sousuo" slot="append" @click="goSearch">搜索</el-button>
          </el-input>
          <el-badge is-dot class="item" v-if="carnum>0">
            <div class="purchaseBtn" @click="$router.push({path : '/index/shoppingTrolley'})">
              <img src="../../assets/img/index/jinhuodanbaise.png">
              进货单
            </div>
          </el-badge>
          <div v-else class="purchaseBtn" @click="$router.push({path : '/index/shoppingTrolley'})">
            <img src="../../assets/img/index/jinhuodanbaise.png">
            进货单
          </div>

        </div>
      </div>
    </div>
    <div class="navBox">
      <div class="topNav">
        <div class="category">
          <img src="../../assets/img/index/category.png" alt="gk">
          <span>全部分类</span>
        </div>
        <div class="is_show">
          <ul>
            <li v-for="item in classIfyList" :key="item.category_id"
                @click="goTo(`/index/commodity/classify?&category_id=${item.category_id}&bz=fl`,item.category_id)">
              {{item.name}}
            </li>
          </ul>
        </div>
        <div :class="['topList',act == '0' ? 'act' : '']" @click="goTo('/index/commodity/home?type_name=0')">
          首页
        </div>
                  <div v-for="(item,index) in tradeTypeList" :key="index" :class="['topList',act == item ? 'act' : '']" @click="goTo(`/index/commodity/classify?type_name=${item}`)">
                    {{item}}
                  </div>
      </div>

      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" :classIfy="classIfyList" v-on:chang="chang">
        </router-view>
      </keep-alive>

      <router-view v-if="!$route.meta.keepAlive" :classIfy="classIfyList" v-on:chang="chang">
      </router-view>
    </div>
  </div> -->
</template>

<script>
    export default {
        data() {
            return {
                input3: '',
                classIfyList: [],
                childList: []
            }
        },
        created() {
            this.getClassify()
        },
        methods: {
            btnclick() {
                this.$router.push('/index/commodity/searchResult?search=' + this.input3)
            },
            mouseover(item) { //移进显示
                this.childList = item.child
            },
            mouseLeave(item) { //移出不显示

            },
            getClassify() {
                this.$HttpGet("/index.php?s=/admin/goods/get_category_List").then(res => {
                    this.classIfyList = res.data;
                })
            },
            handleCommand(command) {
                console.log(command);
                if (command == 'a') {
                    this.$router.push('/index/setting/information');
                } else {
                    window.localStorage.setItem("userInfo", "")
                    window.localStorage.setItem("token", "");
                    localStorage.clear()
                    this.$router.replace({
                        path: "/login"
                    });
                }
            },
            gotopic() {
                this.$router.push('/index/commodity/topic');
            },
            goNext(url) {
                console.log(this.active);
                console.log(url);
                this.$router.push(url)
            },
            goHome() {
                window.open('/#/index/commodity/home?type_name=0')
                    // this.$router.push('/index/commodity/home?type_name=0')
                console.log(123);
            },
            gosearchResult(item) {
                // console.log(this.childList);
                console.log(item)
                    // window.open('/#/index/commodity/searchResult?category_id=' + item.category_id)
                this.$router.push('/index/commodity/searchResult?category_id=' + item.category_id)
            },
        }
    }
</script>

<!-- <script>
    import {
        mapState
    } from "vuex"

    export default {
        name: "commodity",
        data() {
            return {
                act: 0,
                search: "",
                classIfyList: [],
                tradeTypeList: [],
                nav: ''
            };
        },
        beforeRouteLeave(to, from, next) {
            localStorage.removeItem('tradeType');
            localStorage.removeItem('categoryId');
            localStorage.removeItem('brandId');
            next();
        },
        created() {
            this.act = this.$route.query.type_name;
            this.getClassify();
            // this.getTradeType();
            this.tradeTypeList = window.localStorage.getItem("arrTradeType").split(",");
            // debugger
            let that = this;
            document.onkeydown = function(e) {
                let key = window.event.keyCode;
                if (key == 13 && that.search.trim() != '') {
                    that.goSearch()
                }
            }
        },
        computed: {
            ...mapState(["carnum"]),
        },
        watch: {
            $route: function(newVal) {
                this.act = newVal.query.type_name;
                this.nav = "";
                if (newVal.name == 'detail') {
                    this.nav = 'nav'
                }

            }
        },
        methods: {
            chang(data) {
                this.nav = data;
                this.search = '';
            },
            goTo(url, category_id) {
                this.search = '';

                if (category_id == null || category_id == undefined) {
                    category_id = ''
                }
                localStorage.removeItem("scrolltop")
                localStorage.setItem('categoryId', category_id);
                localStorage.setItem('brandId', '');
                localStorage.setItem('commodityPage', 1);
                this.$router.push({
                    path: url
                });
            },
            goSearch() {
                var search = encodeURIComponent(this.search);
                var category_id = localStorage.getItem('categoryId');
                var tradeType = localStorage.getItem('tradeType');
                var brandId = localStorage.getItem('brandId');

                if (category_id == null || category_id == undefined) {
                    category_id = ''
                }
                if (tradeType == null || tradeType == undefined) {
                    tradeType = ''
                }
                if (brandId == null || brandId == undefined) {
                    brandId = ''
                }

                this.$router.push({
                    path: `/index/commodity/classify?category_id=${category_id}&search=${search}&brand_id=${brandId}&type_name=${tradeType}`
                });
            },
            getClassify() {

                this.$HttpGet("/index.php?s=/admin/goods/get_category_List").then(res => {
                    this.classIfyList = res.data;
                })
            },
            getTradeType() {
                this.$HttpGet("/index.php?s=/admin/goods/trade_type_name").then(res => {
                    this.tradeTypeList = res.data;
                })
            }
        }
    };
</script> -->

<!-- <style lang="scss" scoped>
    .commodity {
        position: relative;
        width: 100%;
        margin: 0 auto;
        .navList,
        .nav {
            position: fixed;
            top: 0;
            left: 100px;
            width: calc(100% - 100px);
            height: 90px;
            background: #f7f9fa;
            z-index: 99;
            .shoppingTrolleySearch {
                position: relative;
                width: 1020px;
                height: 90px;
                line-height: 90px;
                text-align: right;
                margin: 0 auto;
                font-size: 16px;
                .searchBox {
                    margin-top: 25px;
                    float: right;
                    width: 490px;
                    display: flex;
                    /deep/ .el-input-group__append .el-button,
                    .el-input-group__append .el-input,
                    .el-input-group__prepend .el-button,
                    .el-input-group__prepend .el-input {
                        font-size: 16px;
                    }
                    /deep/ .el-input-group {
                        width: calc(100% - 125px);
                    }
                    /deep/ .el-badge__content.is-fixed {
                        right: 86px;
                        width: 7px;
                        height: 7px;
                        top: 12px;
                    }
                    .purchaseBtn {
                        margin-left: 20px;
                        width: 125px;
                        height: 40px;
                        line-height: 40px;
                        background: #385CC8;
                        text-align: center;
                        border-radius: 20px;
                        color: #ffffff;
                        cursor: pointer;
                        img {
                            margin-right: 5px;
                            margin-top: -4px;
                        }
                    }
                    .purchaseBtn:hover {
                        background: rgba(#385CC8, 0.8);
                    }
                    /deep/ .el-input__inner {
                        border: 2px solid #385CC8;
                        border-radius: 20px 0px 0px 20px;
                    }
                    /deep/ .el-input-group__append {
                        border: 2px solid #385CC8;
                        border-radius: 0px 20px 20px 0px;
                        background: #385CC8;
                        color: #ffffff;
                    }
                    /deep/ .el-icon-search {
                        color: #385CC8;
                    }
                }
            }
        }
        .nav {
            position: relative;
            left: 0;
            width: 100%;
        }
        .navBox {
            position: absolute;
            width: 100%;
            left: 0;
            top: 90px;
            .topNav {
                display: flex;
                align-content: center;
                justify-content: flex-start;
                align-items: flex-end;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                position: relative;
                width: 1020px;
                height: 54px;
                margin: 0 auto;
                .category {
                    width: 155px;
                    height: 44px;
                    background: #3a61ca;
                    color: #ffffff;
                    line-height: 44px;
                    margin-right: 14px;
                    cursor: pointer;
                    img {
                        width: 20px;
                        height: 20px;
                        margin-left: 12px;
                        margin-right: 8px;
                        margin-bottom: 6px;
                    }
                }
                .category:hover~.is_show {
                    display: block;
                }
                .is_show {
                    position: absolute;
                    width: 155px;
                    height: 348px;
                    overflow-y: auto;
                    top: 54px;
                    background: rgba(0, 0, 0, 0.7);
                    display: none;
                    z-index: 9999999;
                    &:hover {
                        display: block;
                        cursor: pointer
                    }
                    li {
                        height: 29px;
                        padding-left: 40px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 29px;
                        &:hover {
                            background-color: #ffffff;
                            color: #000000;
                        }
                    }
                }
                .topList {
                    margin-right: 28px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                    cursor: pointer
                }
                .topList:hover {
                    /*background: #EEEEEE;*/
                }
                .act {
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #3a62ca;
                    border-bottom: 4px solid #3a62ca;
                    border-radius: 2px;
                    line-height: 48px;
                }
            }
        }
    }
</style> -->

<style lang="scss" scoped>
    * {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        font-variant: tabular-nums;
        line-height: 1.5715;
    }
    
    .mall-layout-header {
        width: 100%;
        background-color: #fff;
    }
    
    .mall-layout-header-container {
        height: 87px;
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: 1280px !important;
    }
    
    .mall-layout-logo-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .mall-layout-logo-header-left {
        display: flex;
        align-items: center;
    }
    
    .img-box {
        width: 71px;
        cursor: pointer;
    }
    
    .mall-layout-search-btn-right {
        display: flex;
        align-items: flex-start;
    }
    
    .mall-layout-search-home {
        position: relative;
    }
    
    .mall-layout-search-prefix-icon {
        /* position: absolute;
        top: 7px;
        left: 9px;
        z-index: 1000; */
        width: 30px;
        height: 30px;
        margin-left: 9px;
    }
    
    .mall-layout-search {
        border-radius: 6PX 0 0 6px;
        border: 1px solid #656efe;
    }
    
    .mall-layout-search-home .ant-input-search {
        width: 500px !important;
        display: flex;
        align-items: center;
    }
    
    .mall-layout-search-home .ant-input-search .ant-input {
        height: 44px;
        padding-left: 5px;
        line-height: 44px;
    }
    
    /deep/ .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 0;
        width: 100%;
    }
    
    .ant-input-group-addon {
        display: flex;
        width: 80px;
        height: 46px;
        background-color: #656efe;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .mall-layout-header-group-btn {
        display: flex;
        gap: 0 !important;
        margin: 0 12px 0 50px;
        justify-content: center;
    }
    
    .mall-layout-header-group-btn-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50px;
        color: #333;
        margin-right: 22px;
        cursor: pointer;
    }
    
    .anticon {
        display: inline-block;
        color: inherit;
        font-style: normal;
        line-height: 0;
        text-align: center;
        text-transform: none;
        vertical-align: -0.125em;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    
    .mall-layout-header-group-btn-item .icon {
        margin-bottom: 5px;
        font-size: 24px;
    }
    
    .mall-layout-header-group-btn-item .name {
        font-size: 12px;
    }
    
    .mall-layout-header-classify-nav {
        display: flex;
        width: 1280px !important;
        margin: 0 auto;
    }
    
    .Assort_assort-container__tVW7Z {
        margin-right: 16px;
    }
    
    .Assort_assort-head__Qc5zA {
        display: flex;
        align-items: center;
        height: 48px;
        color: #333;
        font-weight: 500;
        font-size: 18px;
        cursor: pointer;
    }
    
    .Assort_assort-container__tVW7Z:hover .Assort_assort-box__gNy26 {
        /* visibility: visible; */
        display: block;
        height: 400px;
        min-height: 400px;
    }
    
    .Assort_assort-box__gNy26:hover {
        /* visibility: visible; */
        display: block;
        height: 400px;
        min-height: 400px;
    }
    
    .anticon .Assort_left-icon__t4Y2Y {
        transition: all 0.2s ease 0s;
    }
    
    .Assort_name__FVlfo {
        margin: 0 10px;
        font-size: 16px;
    }
    
    .Assort_name__FVlfo:hover {
        color: #656efe;
    }
    
    .Assort_right-icon__k6HOw {
        width: 10px;
        height: 10px;
        transition: all 0.2s ease 0s;
    }
    
    .Assort_assort-container__tVW7Z .Assort_assort-box__gNy26 {
        position: absolute;
        top: 135px;
        right: 0;
        left: 0;
        z-index: 99;
        height: 0;
        background-color: #fff;
        /* background-color: red; */
        border-top: 1px solid #f4f4f4;
        -webkit-box-shadow: 0 14px 14px 0 rgba(29, 36, 70, 0.08);
        box-shadow: 0 14px 14px 0 rgba(29, 36, 70, 0.08);
        /* visibility: hidden; */
        display: none;
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }
    
    .Assort_assort-center__703JL {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        width: 1280px;
        height: 356px;
        margin: 0 auto;
    }
    
    .Assort_assort-center__703JL:hover {
        height: 400px;
    }
    
    .Assort_assort-center__703JL:hover .Assort_category-body__vulOh {
        display: block;
    }
    
    .Assort_category-list__3c7Q {
        width: 160px;
        /* height: 0; */
        margin: 22px 0;
        overflow-x: hidden;
        overflow-y: auto;
        /* visibility: hidden; */
        -webkit-transition: all 0.1s ease 0s;
        transition: all 0.1s ease 0s;
    }
    
    .Assort_category-item__y6uxE:hover {
        background-color: #dbdcf0;
    }
    
    .Assort_category-item__y6uxE {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 40px;
        padding: 0 15px;
        cursor: pointer;
    }
    
    .Assort_category-title__Hp7N {
        width: 115px;
        overflow: hidden;
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        /* color: red; */
    }
    
    .Assort_category-title__Hp7N:hover {
        color: #656efe;
    }
    
    .Assort_right-icon__k6HOw {
        width: 8px;
        height: 8px;
    }
    
    .Assort_category-body__vulOh {
        position: absolute;
        top: 0;
        left: 160px;
        z-index: 99;
        width: 995px;
        height: 352px;
        margin: 24px 0;
        padding: 0 70px 0 60px;
        overflow-y: auto;
        display: none;
    }
    
    .Assort_subcategory-list__x6HoB {
        /* border-bottom: 1px solid #ccc; */
        display: flex;
        padding: 8px 0;
    }
    
    .Assort-left {
        display: flex;
        font-weight: 700;
        min-width: 100px;
        cursor: pointer;
    }
    
    .Assort-right {
        display: flex;
        cursor: pointer;
        flex-wrap: wrap;
    }
    
    .Assort-right-item {
        margin-right: 20px;
    }
    
    .Assort-right-item:hover {
        color: #656efe;
    }
    
    .mall-layout-header-nav {
        display: flex;
        align-items: center;
        height: 48px;
    }
    
    .mall-layout-header-nav .nav-item {
        padding: 12px 20px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
    }
    
    .ob40 {
        height: 400px;
        min-height: 400px;
        visibility: visible;
    }
    
    .footer-box {
        position: fixed;
        bottom: 0;
    }
    
    .nav-item:hover {
        color: #656efe;
    }
    
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
    
    .mall-layout-header-group-btn-item:hover {
        color: #656efe;
    }
    
    img {
        cursor: pointer;
    }
</style>